import type React from 'react'
import './third.scss'
import type { PayListType } from '../../../types/dom';
import {simpleAmountToChinese,year,month,day} from '../../../utils/china';


interface ThirdDomProps{
  payList:PayListType[],
}
const ThirdDom:React.FC<ThirdDomProps> = ({payList})=>{
  return (
    <>
      {
        payList.map(item=>{
          return(
            <div className="payment">
            <div className="top">
              <div className="title">
                <span>付款申请单</span>
              </div>
              <div className="date">
                <span>{ year}</span>年<span>{month>9?month:'0'+month}</span>月<span>{day>9?day:'0'+day}</span>日
              </div>
            </div>
            <div className="content">
              <div className="left-content">
                <div className="l-l-th">
                  <div className="l-l-th-item">收款单位</div>
                  <div className="l-l-td-item">{item.name}</div>
                </div>
                <div className="l-l-th">
                  <div className="l-l-th-item">账    号</div>
                  <div className="l-l-td-item">{ item.account }</div>
                </div>
                <div className="l-l-th">
                  <div className="l-l-th-item">开户行</div>
                  <div className="l-l-td-item">{item.bank_name}</div>
                </div>
                <div className="l-l-th">
                  <div className="l-l-th-item">金额</div>
                  <div className="l-l-td-item">{simpleAmountToChinese(item.amount)}</div>
                </div>
                <div className="audit">
                  <div className="l-l-th">
                    <div className="audit-item">附件 &nbsp;&nbsp;&nbsp;张</div>
                    <div className="audit-item money">¥  {item.amount}</div>
                  </div>
                  <div className="l-l-th line">
                    <div className="audit-item">审 &nbsp;&nbsp;&nbsp;核</div>
                    <div className="audit-item">财 &nbsp;&nbsp;&nbsp;务</div>
                  </div>
                  <div className="l-l-th">
                    <div className="audit-item audit-height"></div>
                    <div className="audit-item"></div>
                  </div>
                </div>
              </div>
              <div className="right-content">
                <div className="r-t-content">
                  付 款 原 因
                </div>
                <div className="user-content">
                  {item.remark}
                </div>
              </div>
            </div>
            <div className="foot">
              <p>会计：</p>
              <p>记账：</p>
              <p>复核：</p>
              <p>出纳：</p>
              <p>制单：</p>
              <p>签收：&nbsp;&nbsp;&nbsp;</p>
            </div>
          </div>  
          )
        })
      }
      
    </>
  )
}

export default ThirdDom